<template>
  <!-- 使用安全的绑定方式，并添加必要的属性 -->
  <iframe :src="safeLeftUrl" frameborder="0" allowfullscreen class="embedded-frame-left"
    sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>

  <iframe :src="safeRightUrl" frameborder="0" allowfullscreen class="embedded-frame-right"
    sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</template>

<script setup>
import { computed } from 'vue';

// 原始URL
const leftUrl = "http://localhost:8080/left.png";
const rightUrl = "http://localhost:8080/right.png";

// 创建安全的URL对象
const safeLeftUrl = computed(() => {
  try {
    new URL(leftUrl); // 验证URL格式
    return leftUrl;
  } catch (e) {
    console.error("Invalid URL:", e);
    return ""; // 返回空字符串或其他安全回退
  }
});
const safeRightUrl = computed(() => {
  try {
    new URL(rightUrl); // 验证URL格式
    return rightUrl;
  } catch (e) {
    console.error("Invalid URL:", e);
    return ""; // 返回空字符串或其他安全回退
  }
});
</script>

<style scoped>
.embedded-frame-left {
  width: 450px;
  height: 100%;
  background-color: transparent;
  /* 设置背景透明 */
  position: absolute;
  left: 0;
  border: none;
  overflow: hidden;
  /* 移除边框 */
  opacity: 0.8;
  /* 设置整体透明度，0-1之间 */
  top: 70px;
  z-index: 2;
}

.embedded-frame-right {
  width: 450px;
  height: 100%;
  background-color: transparent;
  /* 设置背景透明 */
  position: absolute;
  right: 0;
  border: none;
  overflow: hidden;
  /* 移除边框 */
  opacity: 0.8;
  /* 设置整体透明度，0-1之间 */
  top: 70px;
}
</style>